<template>
  <div class="item_shop">
    <!-- 下拉刷新 -->

    <span v-show="productList.length != 0" class="right_span_item">
      <bScroll @up-dolnshoplist="upDolnshoplist">
        <van-list
          :finished="finished"
          finished-text="没有更多了"
        >
          <!-- 商品列表 -->
          <van-card
            class="home_right_car"
            v-for="(item, index) in productList"
            @click-thumb="showShopping(item)"
            :key="index"
            :num="item.salenumber"
            :tag="item.categoryname"
            :price="`${item.stock}.00`"
            :centered="true"
            :title="item.name"
            :immediate-check="false"
            :thumb="
              item.imageurl
                ? item.imageurl
                : 'https://i.postimg.cc/MH7jLjt1/ec51647bef63e77a653af0f695ede60b.jpg'
            "
          >
            <template #footer>
              <van-icon
                size="25"
                color="#ceb08c"
                @click="addShop(item.id)"
                name="add"
              />
            </template>
          </van-card>
          <span v-if="!upshoping" class="mmmmm">没有更多了</span>
        </van-list>
      </bScroll>
      <!-- 商品详情 -->
      <van-overlay :show="show" @click="show = false">
        <div class="wrappermm" @click="show = false">
          <div class="blockmm">
            <HomeShoppingCar :product="product"></HomeShoppingCar>
          </div>
        </div>
      </van-overlay>
    </span>
    <van-empty v-show="productList.length == 0" description="sh" />
  </div>
</template>

<script>
import { Toast } from "vant";
import HomeShoppingCar from "@/components/Home/HomeShoppingCar.vue";
import bScroll from "@/components/bScroll/bScroll.vue";
import { HomeRightProduct } from "@/network/home/home.js";
import { AddShopCar, GetShopList } from "@/network/shop/shop.js";
export default {
  components: {
    bScroll,
    HomeShoppingCar,
  },
  data() {
    return {
      //右侧产品根据cid查询的。
      productList: [],
      //单个商品
      product: {},
      //产品列表请求参数
      productQuery: {
        pagesize: 5,
        pageindex: 1,
        cid: 11,
      },
      //总页数
      pagecount: 0,
      finished: false,
      show: false,
      loading: false,
      upshoping: true,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  activated() {
    //this.$route.query.cid = 11;
    this.getRightShop();
  },
  created() {
    //this.$route.query.cid = 11;
    this.getRightShop();
  },
  methods: {
    async upDolnshoplist() {
      if (this.upshoping) {
        this.productQuery.pageindex++;
        //console.log(this.productQuery.pageindex);
        const { data: res } = await HomeRightProduct(this.productQuery);
        this.productList = this.productList.concat(res.table);
        if (this.productQuery.pageindex >= this.pagecount) {
          this.upshoping = false;
        }
      } else {
        //Toast('加载完毕');
        //console.log("jieshu");
      }
    },
    showShopping(item) {
      this.product = item;
      this.show = true;
    },
    async getRightShop() {
      console.log(this.$route);
      console.log(this.$route.query.cid);
      (this.upshoping = true),
        (this.loading = false),
        (this.finished = false),
        (this.productQuery.pageindex = 1);
      if (this.$route.query.cid == "undefined"||this.$route.query.cid == undefined) {
        this.productQuery.cid = 11;
        this.$route.query.cid = 11;
      } else {
        this.productQuery.cid = this.$route.query.cid;
      }
      const { data: res } = await HomeRightProduct(this.productQuery);
      this.pagecount = res.pagecount;
      this.productList = res.table;
    },
    onLoad() {
      console.log(123);
      // this.productQuery.pageindex++;
      // const { data: res } =  HomeRightProduct(this.productQuery);
      // this.productList = this.productList.concat(res.table);
      // this.loading = false;
      // if (this.productQuery.pageindex >= this.pagecount) {
      //   this.finished = true;
      // }
    },
    async addShop(pid) {
      const { data: res } = await AddShopCar({ pid: pid });
      await GetShopList();
      Toast.success("加入成功");
      this.$emit("shop-car");
    },
  },
  watch: {
    "$route.fullPath": "getRightShop",
    productList: function () {
      this.$nextTick(() => {
        //this.onLoad()
        this.$children[0].scroll.refresh();
        // console.log(this)
      });
    },
  },
  mounted() {
    //this.onLoad()
  },
};
</script>
<style scoped lang="less">
@import "../../assets/css/index.less";
.mmmmm {
  font-size: 60 * @vw;
  margin-left: 420 * @vw;
  color: rgba(136, 28, 28, 0.37);
}
.item_shop {
  width: 1100 * @vw;
  height: 475 * @vh;
  margin-left: 0 * @vw;
  border-radius: 2000 * @vw;
  margin-top: 60 * @vw;
}
.home_right_car {
  width: 100%;
}
.wrappermm {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.blockmm {
  width: 1100 * @vw;
  position: relative;
  height: 2100 * @vh;
  border-radius: 120 * @vw;
  background-color: #fff;
  padding: 100 * @vw;
  z-index: 999999999999;
}
</style>